import { Component, Vue, Watch } from 'vue-property-decorator'
import * as echarts from 'echarts'
import Nav, { paths } from '@/components/Nav'
import { getDataTab } from '@/api/datetab'

@Component({ components: { Nav } })
export default class DataTab extends Vue {
  public option = {}

  created () {
    this.getDataTab()
  }

  async getDataTab () {
    const { data, meta } = await getDataTab()
    this.option = data
    this.loading = false
  }

  @Watch('option', {})
  op () {
    const myEcharts = echarts.init(this.$refs.echartsDOM as unknown as HTMLElement)
    myEcharts.setOption(this.option)
  }

  private loading= true

  render () {
    return (
        <div>
          {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
          {/* @ts-ignore */}
          <Nav paths={this.paths}/>
          <br />
          <div
            v-loading={this.loading}
            element-loading-background="rgba(0, 0, 0, 0.8)"
            ref='echartsDOM' style={{ height: '500px' }}></div>
        </div>
    )
  }

  public paths: paths = [
    {
      path: '/index',
      pName: '首页'
    },
    {
      path: '/index/reports',
      pName: '数据统计'
    },
    {
      path: '/index/reports',
      pName: '数据报表'
    }
  ]
}
